<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>面试题库</span>
      </div>
      <el-form :inline="true" :model="pageForm">
        <el-form-item label="面试官">
          <el-input v-model="pageForm.interviewerId"></el-input>
        </el-form-item>
        <el-form-item label="面试题">
          <el-input v-model="pageForm.question"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="success" @click="addInterviewQuestion">新增面试题</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="question" label="面试题"></el-table-column>
        <el-table-column prop="referenceAnswer" label="参考答案"></el-table-column>
        <el-table-column prop="interviewerId" label="面试官"></el-table-column>
        <el-table-column prop="aiSrc" label="数字人视频">
          <template slot-scope="scope">
            <!-- 这里可以添加视频播放逻辑，例如使用视频播放器组件 -->
            <video :src="scope.row.aiSrc" controls  style="height: 200px;width: 200px"></video>
          </template>
        </el-table-column>

        <el-table-column label="是否启用">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.isOn == 1 ? '启用' : '禁用' }}</el-tag>
          </template>
        </el-table-column>

      </el-table>
      <div v-if="tableData.length === 0" style="text-align: center;">暂无数据</div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
      <el-dialog
          title="新增面试题"
          :visible.sync="dialogVisible"
          width="50%"
      >
        <el-form :model="addForm" :rules="addRules" ref="addForm">
          <el-form-item label="关联面试官" prop="interviewerId">
            <el-select v-model="addForm.interviewerId">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="面试题" prop="question">
            <el-input v-model="addForm.question"></el-input>
          </el-form-item>
          <el-form-item label="参考答案" prop="referenceAnswer">
            <el-input v-model="addForm.referenceAnswer"></el-input>
          </el-form-item>
          <el-form-item label="数字人播放视频" prop="aiSrc">


            <el-input type="hidden" v-model="addForm.aiSrc"></el-input>

            <el-upload
                class="video-uploader"
                action="http://localhost:8781/file/uploadToOss"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"

            >

              <!-- 这里可以添加视频播放逻辑，例如使用视频播放器组件 -->
              <video v-if="this.addForm.aiSrc" :src="this.addForm.aiSrc" controls  style="height: 200px;width: 200px"></video>


              <i v-else class="el-icon-video-camera video-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveInterviewQuestion">保存</el-button>
        </span>
      </el-dialog>




    </el-card>
  </div>
</template>

<script>
import axios from "axios";

export default {


  data() {
    return {


       MyVideoUrl:'',

      form: {
        interviewer: '',
        interviewQuestion: '',
        videoUrl:''
      },
      pageForm: {
        pageSize: 10,
        pageNum: 1,
        interviewerId: '',
        question: '',
      },
      dialogVideoVisible: false,
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      addForm: {
        interviewerId: '',
        question: '',
        referenceAnswer: '',
        aiSrc: ''
      },
      addRules: {
        interviewerId: [
          {required: true, message: '请选择面试官', trigger: 'change'}
        ],
        question: [
          {required: true, message: '请填入面试题标题', trigger: 'blur'}
        ],
        referenceAnswer: [
          {required: true, message: '请输入内容', trigger: 'blur'}
        ],
        aiSrc: [
          {required: true, message: '请上传视频', trigger: 'change'}
        ]
      },
      videoUrl: null
    };
  },
  mounted() {
    // 这里可以添加初始化数据的逻辑，例如发送请求获取数据
    this.loadList();
  }
  ,
  methods: {
    loadList() {
      axios.post('http://localhost:8781/questionLib/listQuestionLibs', this.pageForm).then(res => {
        console.log(res)
        this.tableData = res.data.data.records;
        console.log(res.data.total)
        this.total = res.data.data.total;

      })
    }
    ,

    handleAvatarSuccess(res,row){
      console.log(res)
      console.log(row)


      this.addForm.aiSrc = res.data;

    },
    playVideo(url) {
      console.log('播放视频:' + url);
      console.log(url);
      this.MyVideoUrl = ''
      this.dialogVideoVisible = true;
      this.MyVideoUrl = url;
    }
    ,
    search() {
      // 这里可以添加搜索逻辑，例如发送请求获取数据
      console.log('执行搜索操作，面试官：', this.form.interviewer, '面试题：', this.form.interviewQuestion);
      this.loadList();

    }
    ,
    addInterviewQuestion() {
      this.dialogVisible = true;
    }
    ,
    handleSizeChange(size) {
      this.pageForm.pageSize = size;
      this.loadList();
    }
    ,
    handleCurrentChange(page) {
      this.pageForm.pageNum = page;
      this.loadList();
    }
    ,
    handleVideoChange(file, fileList) {
      const isMP4 = file.type === 'video/mp4';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isMP4) {
        this.$message.error('只能上传MP4文件!');
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB!');
      }
      if (isMP4 && isLt10M) {
        const reader = new FileReader();
        reader.readAsDataURL(file.raw);
        reader.onload = (e) => {
          this.videoUrl = e.target.result;
        };
      }
    }
    ,
    beforeVideoUpload(file) {
      const isMP4 = file.type === 'video/mp4';
      const isLt10M = file.size / 1024 / 1024 < 10;

      if (!isMP4) {
        this.$message.error('只能上传MP4文件!');
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB!');
      }
      return isMP4 && isLt10M;
    }
    ,
    saveInterviewQuestion() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          // 这里可以添加保存面试题的逻辑，例如发送AJAX请求
          console.log('保存面试题成功', this.addForm);

          axios.post('http://localhost:8781/questionLib/addQuestionLib', this.addForm).then(res=>{
            console.log(res)
            if(res.data.code==200){
              this.$message.success(res.data.msg);
              this.dialogVisible = false;
              this.loadList();
            }else{
              this.$message.error(res.data.msg);
            }
          })


        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },


    // 准备好了
    onPlayerReady() {
      console.log("准备好了");
    },
    // 视频播放
    onPlayerPlay(player) {
      console.log('播放了');
      console.log(player);
      let playTime = 0;
      if (
          Number(Math.floor(this.playedTime)) ===
          Number(Math.floor(player.duration()))
      ) {
        this.playedTime = 0;
        playTime = 0;
      } else if (
          Number(Math.floor(player.currentTime())) !==
          Number(Math.floor(this.playedTime))
      ) {
        playTime = this.playedTime;
        player.currentTime(playTime)
      }
    },
    // 视频暂停的
    onPlayerPause(player) {
      console.log('暂停中');
      console.log(player);
      this.playedTime = player.currentTime();
    },
    // 视频播放完
    onPlayerEnd(player) {
      console.log('播放结束了');
      console.log(player);
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
      console.log("播放停止中");
      console.log(player);
    },
    // 视频已开始播放
    onPlayerPlaying(player) {
      console.log("开始播放了");
      console.log(player);
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {
      console.log("开始下载数据");
      console.log(player);
    },
    // 当前播放位置发生变化时触发
    onPlayerTimeupdate(player) {
      console.log("播放位置变化了");
      console.log(player);
      let timeDisplay = player.currentTime();
      if (timeDisplay - this.currentTime > 1) {
        player.currentTime(this.currentTime > this.maxTime ? this.currentTime : this.maxTime);
      }
      this.currentTime = player.currentTime();
      this.maxTime = this.currentTime > this.maxTime ? this.currentTime : this.maxTime;
    },
    //播放状态改变
    playerStateChanged(playerCurrentState) {
      console.log("播放状态变化了");
      console.log(playerCurrentState);
    },
    // 手动暂停视频的播放
    pause() {
      // 视频播放器的方法调用，要使用this.$refs.videoPlayer.player这个对象去调用
      this.$refs.videoPlayer.player.pause()
    }



  }
};
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.video-uploader.icon {
  font-size: 48px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.video-thumbnail {
  width: 178px;
  height: 178px;
  display: block;
}
</style>